<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Weiran</title>
<script src=http://jpp.googlecode.com/svn/jquery/jquery-1.7.2.min.js></script>
<script src=http://jpp.googlecode.com/svn/jquery/plugins/jquery.cookies-2.2.0.min.js></script>
<script src=http://jpp.googlecode.com/svn/weiran/weiran-1.0.1.min.js></script>
<script src=http://jpp.googlecode.com/svn/md5/md5-1.0.min.js></script>
<script>if (!$.cookies.get('admin')) {window.location.href = 'index.html';}</script>
<style>
    select {
        width: 200px;
    }
    input[type=text] {
        width: 500px;
    }
    input[type=button] {
        width: 120px;
    }
</style>
</head>
<body>
<h1>Weiran Certified Device Creation</h1>

<hr />

<div id=camera>
<h2>Camera</h2>
<table>
<tr><td>Model</td><td><select>
    <option value=mms>MMS</option>
    <option value=webcam>WEBCAM</option>
</select></td></tr>
<tr><td>Camera</td><td><input type=text /></td></tr>
</table>
<p><input type=button value=Create /> <span></span></p>
</div>
<script>
$('#camera input:button').click(function(event) {
    var model = Weiran.String.trim($('#camera select').val()),
        camera = Weiran.String.trim($('#camera input:text').val());
    if (!model || !camera) {
        $('#camera span').text('Both of Model and Camera are required');
        return;
    }
    
    var device = {
        key: md5(camera), // set camera url as a key to device identification code
        model: model,
        admin: $.cookies.get('admin'),
        opts: {
            title: 'Weiran Certified Device',
            lonlat: [116.391499, 39.903177],
            icon: 'http://www.fanghuanweiran.com/devices/' + model.toLowerCase() + '/icon.png',
            page: 'http://www.fanghuanweiran.com/devices/' + model.toLowerCase() + '/index.html',
            alarm: 'http://www.fanghuanweiran.com/devices/' + model.toLowerCase() + '/alarm.mp3',
            width: 540,
            height: 300,
            camera: camera
        }
    }
    
    $.post('/admin/device/create', {dstr: JSON.stringify(device)}, function(data) {
        $('#camera span').text(data);
        $('#camera input:text').val('');
    });
});
</script>

<hr />

<div id=mobilegnss>
<h2>Mobile GNSS</h2>
<table>
    <tr><td>Model</td><td><select id=mobilegnss_model>
        <option value=gt02a>GT02A</option>
    </select></td></tr>
    <tr><td>IMEI</td><td><input type=text id=mobilegnss_imei /></td></tr>
    <tr><td>Host</td><td><input type=text id=mobilegnss_host /></td></tr>
</table>
<p><input type=button value=Create id=mobilegnss_create /> <span id=mobilegnss_info></span></p>
</div>
<script>
$('#mobilegnss_create').click(function(event) {
    var model = Weiran.String.trim($('#mobilegnss_model').val()),
        imei = Weiran.String.trim($('#mobilegnss_imei').val()),
        host = Weiran.String.trim($('#mobilegnss_host').val());
    if (!model || !imei || !host) {
        $('#mobilegnss_info').text('All of Model, IMEI and Host are required');
        return;
    }
    if (imei.length !== 15) {
        $('#mobilegnss_info').text('Invalid IMEI');
        return;
    }
    var hostRegEx = /^(https?:\/\/)([\w\d_-]+\.)+\w{2,5}:\d{2,5}$/;
    if (!hostRegEx.test(host)) {
        $('#mobilegnss_info').text('Invalid Host');
        return;
    }
    
    var device = {
        key: md5(imei), // set IMEI as a key to device identification code
        model: model,
        admin: $.cookies.get('admin'),
        opts: {
            title: 'Weiran Certified Device',
            lonlat: [116.391499, 39.903177],
            icon: 'http://www.fanghuanweiran.com/devices/' + model.toLowerCase() + '/icon.png',
            page: 'http://www.fanghuanweiran.com/devices/' + model.toLowerCase() + '/index.html',
            alarm: 'http://www.fanghuanweiran.com/devices/' + model.toLowerCase() + '/alarm.mp3',
            width: 540,
            height: 300,
            imei: imei,
            host: host
        }
    }
    
    $.post('/admin/device/create', {dstr: JSON.stringify(device)}, function(data) {
        $('#mobilegnss_info').text(data);
        $('#mobilegnss input:text').val('');
    });
});
</script>

<hr />

<div id=query>
<p><input id=query type=button value=Query /> <input id=clear type=button value=Clear /></p>
<pre></pre>
</div>
<script>
$('#query #query').click(function(event) {
    $.get('/admin/device/query', function(data) {
        var devices = JSON.parse(data);
        if (Weiran.Array.isArray(devices)) {
            var i = 0, len = devices.length, dev, str = '';
            for (i=0; i<len; i++) {
                dev = devices[i];
                str += ('Dev-' + Weiran.Number.zeroize(i+1, 6) + ': ' + JSON.stringify(dev) + '\n');
            }
            $('#query pre').text(str);
        } else {
            $('#query pre').text(data);
        }
    });
});
$('#query #clear').click(function(event) {
    $('#query pre').empty();
});
</script>

<hr />

</body>
</html>
